import React, { Component } from "react";
import { connect } from "./libs/react-mredux";
import { increment, decrement } from "./store/actions";
import "./App.css";

class App extends Component {
  constructor() {
    super();
    this.selectVal = React.createRef();
    this.state = { count: 0 };
  }
  add = () => {
    this.props.increment(Number(this.selectVal.current.value));
  };
  minus = () => {
    this.props.decrement(Number(this.selectVal.current.value));
  };
  render() {
    const count = this.props.count;
    return (
      <div className="App">
        {count}
        <select ref={this.selectVal}>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <button onClick={this.add}>+++</button>
        <button onClick={this.minus}>---</button>
      </div>
    );
  }
}

export default connect(state => ({ count: state.count }), {
  increment,
  decrement
})(App);
